header {
  margin-top: 4rem;
  min-height: 500px;
  background: url(https://images.news.avaya.com/EloquaImages/clients/AvayaInc/%7Bf14e46ed-a5ae-4901-85eb-47c3cf375cc0%7D_city-bg.png);
  background-size: 800px;
  background-repeat: no-repeat;
  background-position: 300px 80px;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}
@media screen and (max-width: 991px) {
  header {
    background-size: contain;
    background-position: center 150px;
    min-height: 400px;
  }
}

header .logo {
  position: relative;
  z-index: 800;
}

header .logo img {
  width: 360px;
}

header .logo h2 {
  font-family: "Oxygen", sans-serif;
  font-weight: 600;
  font-size: 30px;
}

header .logo span {
  font-size: 22px;
  font-family: "Oxygen", sans-serif;
  font-weight: 300;
}

header .city {
  width: 700px;
  position: absolute;
  right: 0;
  top: -1rem;
}
@media screen and (max-width: 991px) {
  header .city {
    right: -50%;
    bottom: -40rem;
    opacity: 0.5;
    z-index: 1;
    display: none;
  }
}

header .shape-left {
  position: absolute;
  width: 300px;
  left: 0;
  top: 30%;
}
@media screen and (max-width: 991px) {
  header .shape-left {
    top: 40%;
    display: none;
  }
}
header .shape-left .grad-shape {
  position: absolute;
  z-index: 10;
  width: 280px;
  height: 280px;
  left: -50%;
  rotate: 45deg;
  margin: 0 auto;
  border-radius: 0 2rem 0 0;
  /* Apply glow to the parent to map perfectly to the pseudo child */
  filter: drop-shadow(0 0 15px rgba(97, 214, 255, 0.8));
}
header .shape-left .grad-shape::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 4px; /* The border width */
  background: linear-gradient(90deg, #61D6FF 35%, #9C4DE8 50%, #da291c 75%);
  background-size: 250% 250%;
  animation: borderFlow 6s ease-in-out infinite;
  /* Use mask to cutout the middle */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.intro {
  width: 100%;
  min-height: 600px;
  background: linear-gradient(0deg, rgb(255, 255, 255) 4%, rgb(236, 223, 255) 34%, rgb(210, 245, 255) 65%, rgba(255, 255, 255, 0.81) 92%, rgba(255, 255, 255, 0) 99%);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  margin-top: -6rem;
  padding: 8rem 0;
}
@media screen and (max-width: 991px) {
  .intro {
    padding: 2rem;
    padding-top: 8rem;
    margin-top: -4rem;
  }
}

.intro h1 {
  font-size: 36px;
  font-weight: 300;
  font-family: "Oxygen", sans-serif;
}

.intro .intro-img {
  position: relative;
}
@media screen and (max-width: 991px) {
  .intro .intro-img {
    display: none;
  }
}
.intro .intro-img .grad-box {
  position: absolute;
  z-index: 10;
  bottom: 2rem;
  width: 260px;
  height: 260px;
  rotate: 45deg;
  margin: 0 auto;
  left: 4.79rem;
  /* Apply glow directly to the parent */
}
.intro .intro-img .grad-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 4px; /* The border width */
  background: linear-gradient(90deg, #61D6FF 35%, #9C4DE8 50%, #da291c 75%);
  background-size: 250% 250%;
  animation: borderFlow 6s ease-in-out infinite;
  /* Use mask to cutout the middle */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.intro .intro-img img {
  width: 360px;
  margin: 0 auto;
  display: block;
  margin-bottom: -3rem;
  z-index: 210;
  position: relative;
}

.intro .intro-txt {
  font-size: 14px;
  z-index: 999;
}

.intro .intro-txt .intro-data {
  display: flex;
  align-items: center;
}

.intro .intro-txt .intro-data img {
  height: 40px;
  margin-right: 1rem;
}

.intro .intro-txt .intro-data p {
  font-weight: 700;
  margin: 0;
  font-size: 16px;
}

.takeaways {
  width: 100%;
  min-height: 200px;
  padding: 1rem 6rem 3rem;
}

.takeaways h2 {
  text-align: center;
  font-size: 36px;
  font-family: "Oxygen", sans-serif;
  font-weight: 700;
}

.takeaways .takeaways-col {
  font-size: 14px;
  padding: 0 3rem;
}
@media screen and (max-width: 991px) {
  .takeaways .takeaways-col {
    padding: 0;
  }
}

.takeaways .takeaways-col img {
  width: 310px;
  margin-bottom: 1rem;
  transition: all 300ms ease-in-out;
}

.register {
  padding: 3rem;
  background: url(https://images.news.avaya.com/EloquaImages/clients/AvayaInc/%7B5379cefa-e081-4598-8274-b5084823d7c3%7D_bg-form.png);
  background-size: 100%;
  background-position: bottom;
  background-repeat: no-repeat;
  padding-bottom: 8rem;
}
@media screen and (max-width: 991px) {
  .register {
    padding: 1rem;
    padding-bottom: 6rem;
  }
}

.register h2 {
  text-align: center;
  font-size: 36px;
  font-family: "Oxygen", sans-serif;
  font-weight: 700;
}

@media screen and (max-width: 991px) {
  .navbar {
    background-color: rgb(251, 251, 253) !important;
    border-bottom: 0.5px solid rgba(3, 3, 3, 0.1) !important;
  }
}